<template>
  <div
    class="w-full h-10 text-lg m-1 border-l-4 border-l-green-400 flex justify-around items-center text-white"
  >
    <div
      @click="active = 'today'"
      :class="active === 'today' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      查今日
    </div>
    <div
      @click="active = 'yestday'"
      :class="active === 'yestday' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      查昨天
    </div>
    <div
      @click="active = 'week'"
      :class="active === 'week' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      查一周
    </div>
    <div
      @click="active = 'all'"
      :class="active === 'all' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      查全部
    </div>
  </div>

  <div
    class="w-full h-10 m-1 border-l-4 border-l-green-400 flex justify-around items-center text-white"
  >
    <div
      @click="status = 3"
      :class="status === 3 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      异常锁单
    </div>
    <div
      @click="status = 6"
      :class="status === 6 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      已完成
    </div>
    <div
      @click="status = 7"
      :class="status === 7 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      已结束
    </div>
    <div
      @click="status = 8"
      :class="status === 8 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      系统强补
    </div>
    <div
      @click="status = 9"
      :class="status === 9 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
    >
      超时处罚
    </div>
  </div>

  <van-search
    style="border-radius: 4px; margin-top: 2px; padding: 0 0 0px 0"
    v-model="searchValue"
    @search="searchOrder"
    placeholder="请输入订单号"
    show-action
  >
    <template #action>
      <div @click="searchOrder">搜索</div>
    </template>
  </van-search>

  <div class="w-full h-full bg-white p-2">
    <OrderList ref="OrderListObj" :order-status="status" :search="searchKey" />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import OrderList from './components/OrderList.vue'
import dayjs from 'dayjs'

const OrderListObj = ref()
const active = ref('today')
const status = ref(3)
const dateList = {
  today: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
  yestday: [
    dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
    dayjs().subtract(1, 'day').format('YYYY-MM-DD 23:59:59')
  ],
  week: [
    dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'),
    dayjs().format('YYYY-MM-DD 23:59:59')
  ],
  all: ''
}
const searchKey = ref({
  dateTime: dateList[active.value],
  search: ''
})
const searchValue = ref('')

watch(active, () => {
  searchKey.value.dateTime = dateList[active.value]
})

function searchOrder() {
  OrderListObj.value.searchData(searchValue.value)
}
</script>
